<script setup lang="ts">
import { defineOptions } from "vue";
import type Typings from "@/typings";

defineOptions({
  name: "xt-breadcrumb",
});

interface PropType {
  options: Typings.Common.option[];
  alias?: Typings.Common.alias;
}

withDefaults(defineProps<PropType>(), {
  options: () => [],
  alias: () => ({
    name: "name",
    code: "code",
    replace: "replace",
  }),
});
</script>

<template>
  <el-breadcrumb class="xt-breadcrumb" separator="/">
    <template v-for="item in options" :key="item[alias.code]">
      <el-breadcrumb-item
        v-if="item[alias.code]"
        :to="{ path: item[alias.code] }"
        :replace="!!item[alias.replace]"
      >
        {{ item[alias.name] }}
      </el-breadcrumb-item>
      <el-breadcrumb-item v-else>{{ item[alias.name] }}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

<style lang="scss" scoped></style>
